import { BorderBox1, Decoration5, BorderBox11, BorderBox6, BorderBox9, BorderBox8, BorderBox7, BorderBox10, BorderBox12, BorderBox13 } from '@jiaminghi/data-view-react'
import BigScrollRankingBoard from '@/components/bigView/BigScrollRankingBoard'
// import BigLine from '@/components/bigView/BigLine'
import BigCapsuleChart from '@/components/bigView/BigCapsuleChart'
import FlylineChartEnhanced from '@/components/bigView/BigFlylineChartEnhanced'
import BigConicalColumnChart from '@/components/bigView/BigConicalColumnChart'
import styles from './index.module.scss'
const BigView = () => {
    return (
        <BorderBox11 title="数据大屏" className={styles.wrap}>
            <Decoration5 style={{width: '80vw', height: '40px', position: 'absolute', top: '30px', left: '10vw'}} />
            <div style={{width: '100%', height: '88vh', margin: '8vh auto 0px auto', overflow: 'hidden', display: 'flex', justifyContent: 'space-around'}}>
            <div style={{ flex: '1', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <BorderBox13 style={{ width: '98%', height: '32%' }}>
                    <BigScrollRankingBoard></BigScrollRankingBoard>
                </BorderBox13>
                <BorderBox8 reverse={true} style={{ width: '98%', height: '32%' }}>
                    <BorderBox6>
                        <BigConicalColumnChart></BigConicalColumnChart>
                    </BorderBox6>
                </BorderBox8>
                <BorderBox10 style={{ width: '98%', height: '32%' }}>
                    
                </BorderBox10>
            </div>
            <div style={{ flex: '2', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <BorderBox10 style={{ width: '98%', height: '66%' }}>
                    <FlylineChartEnhanced />
                </BorderBox10>
                <BorderBox1 style={{ width: '98%', height: '32%' }}></BorderBox1>
            </div>
            <div style={{ flex: '1', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <BorderBox9 style={{ width: '98%', height: '32%' }}>
                    <BigCapsuleChart />
                </BorderBox9>
                <BorderBox8 style={{ width: '98%', height: '32%' }}>
                    <BorderBox7></BorderBox7>
                </BorderBox8>
                <BorderBox12 style={{ width: '98%', height: '32%' }}></BorderBox12>
            </div>
            </div>
        </BorderBox11>
    )
}

export default BigView